<template>
    <div>
        <el-tree :data="menus" :props="menusProps" node-key="catId" ref="menuTree" @node-click="nodeClick"></el-tree>
    </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
// 例如：import  《组件名称》  from '《组件路径》 ';

export default {
    // import 引入的组件需要注入到对象中才能使用
    components: {},
    props: {},
    data() {
        // 这里存放数据
        return {
            menus: [],
            menusProps: {
                children: 'children',
                label: 'name'
            }
        }
    },
    // 计算属性 类似于 data 概念
    computed: {},
    // 监控 data 中的数据变化
    watch: {},
    // 方法集合
    methods: {
        //获取多级菜单
        getMenu() {
            this.$http({
                url: this.$http.adornUrl('/product/category/list/tree'),
                method: 'get'
            }).then(({data}) => {
                this.menus = data.data;
            })
        },
        nodeClick(data, node, component){
            console.log("子组件categroy的节点被点击:", data,node,component);
            //向父组件发送tree-node-click事件
            this.$emit("tree-node-click", data,node,component);
        }
    },
    // 生命周期 - 创建完成（可以访问当前this 实例）
    created() {
        this.getMenu()
    },
    // 生命周期 - 挂载完成（可以访问 DOM 元素）
    mounted() {
    },
    beforeCreate() {
    },
    beforeMount() {
    }, // 生命周期 - 挂载之前
    beforeUpdate() {
    }, // 生命周期 - 更新之前
    updated() {
    }, // 生命周期 - 更新之后
    beforeDestroy() {
    }, // 生命周期 - 销毁之前
    destroyed() {
    }, // 生命周期 - 销毁完成
    activated() {
    } // 如果页面有 keep-alive 缓存功能,这个函数会触发
}
</script>

<style scoped>
</style>
